<!--
Created by Borui Wang (bwang29@wisc.edu)
March, 2012, GoCuro
index.html
-->

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>GoCuro Web Client</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
<style type="text/css">
      body {
        padding-top: 60px;
        padding-bottom: 40px;
      }
      .sidebar-nav {
        padding: 9px 0;
      }
</style>
<link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
<!-- Le fav and touch icons -->
</head>
<body>
<div class="navbar navbar-fixed-top">
	<div class="navbar-inner">
		<div class="container-fluid">
			<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
			</a>
			<a class="brand" href="#" onClick="window.location.reload();">GoCuro</a>
			<div class="nav-collapse">
				<ul class="nav">
					<li class="active"><a href="#" onClick="window.location.reload();">Home</a></li>
					<li><a href="#about">About</a></li>
				</ul>
				<p class="navbar-text pull-right" id="login_status">
					Not logged in
					<!--Logged in as <a href="#">username</a>-->
				</p>
			</div>
			<!--/.nav-collapse -->
		</div>
	</div>
</div>
<div class="container-fluid">
	<div class="row-fluid">
		<div class="span3">
			<div class="well sidebar-nav">
				<span id="nav_info">&nbsp; Please login to view tasks.</span>
				<ul class="nav nav-list" id="nav_bar">
					<li class="nav-header"><i class="icon-list-alt"></i>Tasks</li>
					<li class="active"><a href="#">Manage Inventory</a></li>
					<!--<li><a href="#">Disable a device</a></li>-->
					<li class="nav-header"><i class="icon-cog"></i>Settings</li>
					<li><a href="#" onClick="editNewUserView();">Change my account information</a></li>
				</ul>
			</div>
			<!--/.well -->
		</div>
		<!--/span-->
		<!-----------------------------login_view--------------------------------------->
		<div class="span9" id="login_view">
				<form class="form-horizontal">
					<fieldset>
						<legend>GoCuro User Login</legend>
						GoCuro is online inventory management system with a mobile app-client for Android used primarily on the job site for inventory management. The primary functionality is to give users the ability to scan barcodes attached to raw materials through a camera phone and then process and save the barcode information to an inventory database. Specific bar codes to be pictured and potentially interpreted by GoCuro's mobile app include standard retail bar codes, QR codes and PDF417. Gocuro also provides a web interface that allows the user to track and manage the inventory information stored on the database.
						<div class="control-group">
							<label class="control-label">Username</label>
							<div class="controls docs-input-sizes">
								<input id="login_username" class="span2" type="text" placeholder="username">
							</div>
							<label class="control-label">Password</label>
							<div class="controls docs-input-sizes">
								<input id="login_password" class="span2" type="password" placeholder="password">
							</div>
						</div>
					</fieldset>
				</form>
				<div class="form-actions">
					<button type="submit" class="btn btn-primary" id="login_button" onclick="userLoginPost();">Login</button>
					<button class="btn" onclick="initNewUserView();">Create new user</button>
				</div>
                
                <div class="alert alert-success" id="newuser_create_success_msgbox">
			  		You just created a new user successfully, please login with your username and password.
				</div>
                <div class="alert alert-error" id="newuser_login_failure_msgbox">
			  		...
				</div>
                <div id="login_wait" style="display:none"><center><br/>Please wait.. <img src="img/loading.gif" width="36" height="36"></center></div>
                
		</div>
		<!--/span-->
		<!-----------------------------manage_inventory_view--------------------------------------->
		<div class="span9" id="manage_inventory_view">
        
          
			<legend>Manage Inventory </legend>
            <button class="btn btn-info" onClick="searchInventoryGet();">Refresh</button>
			<button class="btn" onclick="$('#newInventory').modal()">Add new inventory</button>
			&nbsp;&nbsp;<button class="btn" onclick="initImportInventoryView();">Import inventory</button>
			<button class="btn" onclick="initExportInventoryView();">Export inventory</button><br/><br/>
            
           
            <div id="item_sort_ui_toggle">
             &nbsp;&nbsp;Sort by&nbsp;&nbsp;
            <select class="span2" id="item_sort_select" onChange="sort_items_ui(this.value);">
                <option value="i_id">Inventory #</option>
                <option value="e_id">Employee #</option>
                <option value="j_id">Jobsite #</option>
                <option value="d_id">Device #</option>
            </select>
            
                         &nbsp;&nbsp;Find order within &nbsp;&nbsp;
            <select class="span2" id="item_range_select" onChange="searchInventoryGet();">
                <option value="8760">last year</option>
                <option value="1">last hour</option>
                <option value="2">last 2 hours</option>
            </select>
            
            </div>
            
                        
            <div class="alert alert-success" id="item_operation_success_msgbox">
			  	    ...
			</div>
          	<div class="alert alert-error" id="item_operation_failure_msgbox">
			  		...
			</div>
            
     
     
			<table class="table table-condensed">
			<thead>
			<tr>
				<th>
					Inventory #
				</th>
				<th>
					Employee Name (id)
				</th>
				<th>
					Jobsite (id)
				</th>
				<th>
					Item name (barcode)
				</th>
                <th>
					Quantity
				</th>
                <th>
					Device ID
				</th>
				<th>
					Last updated time
				</th>
				<th>
					Action
				</th>
			</tr>
			</thead>
			<tbody id="inventory_form_tbody">
           
			<tr>
				<td>
					demo
				</td>
				<td>
					demo
				</td>
				<td>
					demo
				</td>
				<td>
					demo
				</td>
				<td>
					demo
				</td>
				<td>
					<button class="btn btn-mini" onclick="initEditInventoryView(this.id);">Edit</button> &nbsp;<button class="btn btn-mini btn-danger" onclick="initDeleteInventoryView(this.id);">Delete</button>
				</td>
			</tr>
			
			</tbody>
			</table>
            <div id="item_panel_wait" style="display:none"><center><br/>Please wait.. <img src="img/loading.gif" width="36" height="36"></center><br/></div>
     
		</div>
		<!--/span-->
	</div>
	<!--/row-->
	<hr>
	<footer>
	<p>
		&copy; GoCuro 2012
	</p>
	</footer>
</div>
<!--/.fluid-container-->
<!------------------------- modal newUser -------------------------------->
<div class="modal fade" id="newUser">
	<div class="modal-header">
		<a class="close" data-dismiss="modal">×</a>
		<h3>Create a new user</h3>
	</div>
	<div class="modal-body">
		<br>
		<br>
		<form class="form-horizontal">
			<fieldset>
				<div class="control-group">
					<label class="control-label">Username</label>
					<div class="controls docs-input-sizes">
						<input id="newuser_name" class="span2" type="text" placeholder="username">
					</div>
					<label class="control-label">Password</label>
					<div class="controls docs-input-sizes">
						<input id="newuser_password" class="span2" type="password" placeholder="password">
					</div>
                    <label class="control-label">Email</label>
					<div class="controls docs-input-sizes">
						<input id="newuser_email" class="span2" type="test" placeholder="email">
					</div>                
                    <label class="control-label">Phone number</label>
					<div class="controls docs-input-sizes">
						<input id="newuser_phonenumber" class="span2" type="test" placeholder="phone number">
					</div>                   
                    
                    <div id="newuser_enable_select_company_jobsite">
                        <label class="control-label">Company</label>
                        <div class="controls docs-input-sizes" id="newuser_company_choices">
                            <select class="span3">
                                <option>Select company</option>
                            </select>
                        </div>
                        
                        <label class="control-label">Jobsite</label>
                        <div class="controls docs-input-sizes" id="newuser_jobsite_choices">
                            <select class="span3">
                                <option>Select jobsite</option>
                            </select>
                        </div>
                    </div>
                    
                    <div id="newuser_wait"><center><br/>Please wait.. <img src="img/loading.gif" width="36" height="36"></center></div>
				</div>
			</fieldset>
		</form>
        <div class="alert alert-error" id="newuser_errbox">
			  ...
		</div>
        <div class="alert alert-success" id="newuser_msgbox">
			  ...
		</div>
	</div>
	<div class="modal-footer">
		<a href="#" class="btn" onclick="$('#newUser').modal('hide')">Cancel</a>
		<a href="#" class="btn btn-primary" onClick="createUserPost();">Create</a>
	</div>
</div>
<!------------------------- edit newUser -------------------------------->
<div class="modal fade" id="editUser">
	<div class="modal-header">
		<a class="close" data-dismiss="modal">×</a>
		<h3>Edit user account</h3>
	</div>
	<div class="modal-body">
		<br>
		<br>
		<form class="form-horizontal">
			<fieldset>
				<div class="control-group">
					<label class="control-label">Username</label>
					<div class="controls docs-input-sizes">
						<input id="edituser_name" class="span2" type="text" placeholder="username">
					</div>

                    <label class="control-label">Email</label>
					<div class="controls docs-input-sizes">
						<input id="edituser_email" class="span2" type="test" placeholder="email">
					</div>
                    
					<label class="control-label">Phone number</label>
					<div class="controls docs-input-sizes">
						<input id="edituser_phone_number" class="span2" type="text" placeholder="phone number">
					</div>                  
                    
                    <div id="edituser_enable_select_company_jobsite">
                        <label class="control-label">Company</label>
                        <div class="controls docs-input-sizes" id="edituser_company_choices">
                            <select class="span3">
                                <option>Select company</option>
                            </select>
                        </div>
                        
                        <label class="control-label">Jobsite</label>
                        <div class="controls docs-input-sizes" id="edituser_jobsite_choices">
                            <select class="span3">
                                <option>Select jobsite</option>
                            </select>
                        </div>
                    </div>
                    
                    <div id="edituser_wait"><center><br/>Please wait.. <img src="img/loading.gif" width="36" height="36"></center></div>
				</div>
			</fieldset>
		</form>
        <div class="alert alert-error" id="edituser_errbox">
			  ...
		</div>
        <div class="alert alert-success" id="edituser_msgbox">
			  ...
		</div>
	</div>
	<div class="modal-footer">
		<a href="#" class="btn" onclick="$('#editUser').modal('hide')">Cancel</a>
		<a href="#" class="btn btn-primary" onClick="editUserPost();">Update</a>
	</div>
</div>
<!------------------------- modal newInventory -------------------------------->
<div class="modal fade" id="newInventory">
	<div class="modal-header">
		<a class="close" data-dismiss="modal">×</a>
		<h3>Add new inventory</h3>
	</div>
	<div class="modal-body">
		<br>
		<br>
		<form class="form-horizontal">
			<fieldset>
				<div class="control-group">
					<label class="control-label">Item name</label>
					<div class="controls docs-input-sizes">
						<input id="newitem_name" class="span2" type="text" placeholder="Item name">
					</div>
					<label class="control-label">Quantity</label>
					<div class="controls docs-input-sizes">
						<input id="newitem_quantity" class="span2" type="text" placeholder="Quantity">
					</div>
					<label class="control-label">Barcode</label>
					<div class="controls docs-input-sizes">
						<input id="newitem_barcode" class="span2" type="text" placeholder="Barcode">
					</div>       
                    
                    <div id="newitem_wait" style="display:none"><center><br/>Please wait.. <img src="img/loading.gif" width="36" height="36"></center></div>       
                    
                          
				</div>
			</fieldset>
		</form>
        <div class="alert alert-error" id="newitem_errbox">
			  ...
		</div>
        <div class="alert alert-success" id="newitem_msgbox">
			  ...
		</div>
	</div>
	<div class="modal-footer">
		<a href="#" class="btn" onclick="$('#newInventory').modal('hide')">Cancel</a>
		<a href="#" class="btn btn-primary" onClick="newItemPost();">Create</a>
	</div>
</div>
<!------------------------- modal importInventory -------------------------------->
<div class="modal fade" id="importInventory">
	<div class="modal-header">
		<a class="close" data-dismiss="modal">×</a>
		<h3>Import inventory data</h3>
	</div>
	<div class="modal-body">
		<form class="form-horizontal">
			<fieldset>
            </fieldset>
            <div id="csvimportiframe">
            	<iframe src="csvupload.html" width="100%" height="150px" style="border:none;  overflow:hidden"></iframe>
            </div>
			</fieldset>
		</form>

	</div>
	<div class="modal-footer">
		<a href="#" class="btn" onclick="$('#importInventory').modal('hide');searchInventoryGet();">Close</a>
	</div>
</div>
<!------------------------- modal exportInventory -------------------------------->
<div class="modal fade" id="exportInventory">
	<div class="modal-header">
		<a class="close" data-dismiss="modal">×</a>
		<h3>Export inventory data</h3>
	</div>
	<div class="modal-body">
		<br>
		<br>
		<form class="form-horizontal">
			<fieldset>
            <h3>Click the "Get file URL" button and get the url for the file. </h3>
            <span id="exportfileurl"></span>
			<div id="exportcsv_wait" style="display:none"><center><br/>Please wait.. <img src="img/loading.gif" width="36" height="36"></center></div>
			</fieldset>
		</form>
        <div class="alert alert-error" id="exportcsv_errbox">
			  ...
		</div>
        <div class="alert alert-success" id="exportcsv_msgbox">
			  ...
		</div>
	</div>
	<div class="modal-footer">
		<a href="#" class="btn" onclick="$('#exportInventory').modal('hide')">Close</a>
		<a href="#" class="btn btn-primary" onClick="exportCSV()">Get file URL</a>
	</div>
</div>
<!------------------------- modal editInventory -------------------------------->
<div class="modal fade" id="editInventory">
	<div class="modal-header">
		<a class="close" data-dismiss="modal">×</a>
		<h3>Edit inventory</h3>
	</div>
	<div class="modal-body">
		<br>
		<br>
		<form class="form-horizontal">
			<fieldset>
				<div class="control-group">
					<label class="control-label">Item name</label>
					<div class="controls docs-input-sizes">
						<input id="edititem_name" class="span2" type="text" placeholder="Item　name">
					</div>
					<label class="control-label">Quantity</label>
					<div class="controls docs-input-sizes">
						<input id="edititem_quantity" class="span2" type="text" placeholder="Quantity">
					</div>
					<label class="control-label">Barcode</label>
					<div class="controls docs-input-sizes">
						<input id="edititem_barcode" class="span2" type="text" placeholder="Barcode">
					</div>     
                    
                    <div id="edititem_wait" style="display:none"><center><br/>Please wait.. <img src="img/loading.gif" width="36" height="36"></center></div>                     
				</div>
			</fieldset>
		</form>
        <div class="alert alert-error" id="edititem_errbox">
			  ...
		</div>
        <div class="alert alert-success" id="edititem_msgbox">
			  ...
		</div>
	</div>
	<div class="modal-footer">
		<a href="#" class="btn" onclick="$('#editInventory').modal('hide')">Cancel</a>
		<a href="#" class="btn btn-primary" onClick="editItemPost()">Confirm</a>
	</div>
</div>
<!------------------------- modal deleteInventory -------------------------------->
<div class="modal fade" id="deleteInventory">
	<div class="modal-header">
		<a class="close" data-dismiss="modal">×</a>
		<h3>Delete inventory #<span id="delete_confirm_id"></span></h3>
	</div>
	<div class="modal-body">
		<br>
		<br>
		<form class="form-horizontal">
			Are you sure?
            <div id="deleteitem_wait" style="display:none"><center><br/>Please wait.. <img src="img/loading.gif" width="36" height="36"></center></div>   
		</form>
        <div class="alert alert-error" id="deleteitem_errbox">
			  ...
		</div>
        <div class="alert alert-success" id="deleteitem_msgbox">
			  ...
		</div>
	</div>
	<div class="modal-footer">
		<a href="#" class="btn" onclick="$('#deleteInventory').modal('hide')">Cancel</a>
		<a href="#" class="btn btn-primary" onClick="deleteItemPost()">Delete</a>
	</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="js/util.js"></script>
<script src="js/ws.js"></script>
<script src="js/main.js"></script>

</body>
</html>